<template>
  <div class="conveyor-belt rotate">
    <!-- 创建 SVG 元素 -->
    <svg ref="svg"></svg>
    <div>
      <div class="xz">
        <div v-for="(mouth, index) in traysData.trayMouths" :key="index" :class="['xz-' + mouth, 'mouth-' + index]">
          <div class="xz-t"></div>
          <div class="item2"
               :class="{ 'in-goods': traysData.trayInGoods[index], 'err-status': traysData.trayErrStatus[index] }"
               :id="`item-${index}`">
            <span class="num" :ref="'numElement'">{{mouth }}</span>
          </div>
          <div class="xz-b"></div>
        </div>
      </div>
    </div>
<!--    <div class="xz">-->
<!--      <div class="xz-1">-->
<!--        <div class="xz-1-t"></div>-->
<!--        <div class="item2"><span class="num" ref="numElement"></span></div>-->
<!--        <div class="xz-1-b"></div>-->
<!--      </div>-->
<!--      <div class="xz-2">-->
<!--        <div class="xz-2-t"></div>-->
<!--        <div class="item2"><span class="num" ref="numElement"></span></div>-->
<!--        <div class="xz-2-b"></div>-->
<!--      </div>-->
<!--      <div class="xz-3">-->
<!--        <div class="xz-3-t"></div>-->
<!--        <div class="item2"><span class="num" ref="numElement"></span></div>-->
<!--        <div class="xz-3-b"></div>-->
<!--      </div>-->
<!--      <div class="xz-4">-->
<!--        <div class="xz-4-t"></div>-->
<!--        <div class="item2"><span class="num" ref="numElement"></span></div>-->
<!--        <div class="xz-4-b"></div>-->
<!--      </div>-->
<!--      <div class="xz-5">-->
<!--        <div class="xz-5-t"></div>-->
<!--        <div class="item2"><span class="num" ref="numElement"></span></div>-->
<!--        <div class="xz-5-b"></div>-->
<!--      </div>-->
<!--      <div class="xz-6">-->
<!--        <div class="xz-6-t"></div>-->
<!--        <div class="item2"><span class="num" ref="numElement"></span></div>-->
<!--        <div class="xz-6-b"></div>-->
<!--      </div>-->
<!--      <div class="xz-7">-->
<!--        <div class="xz-7-t"></div>-->
<!--        <div class="item2"><span class="num" ref="numElement"></span></div>-->
<!--        <div class="xz-7-b"></div>-->
<!--      </div>-->
<!--      <div class="xz-8">-->
<!--        <div class="xz-8-t"></div>-->
<!--        <div class="item2"><span class="num" ref="numElement"></span></div>-->
<!--        <div class="xz-8-b"></div>-->
<!--      </div>-->
<!--      <div class="xz-9">-->
<!--        <div class="xz-9-t"></div>-->
<!--        <div class="item2"><span class="num" ref="numElement"></span></div>-->
<!--        <div class="xz-9-b"></div>-->
<!--      </div>-->
<!--    </div>-->

  </div>
</template>

<script>
import {onMounted, ref, nextTick, defineExpose, defineComponent} from 'vue';
import * as d3 from "d3";

export default defineComponent({
  props: {
    traysData: {
      type: Object,
      required: true,
    },

  },

  setup() {
    const svg = ref(null);
    const numRef = ref([])

    onMounted(() => {

      // 获取 SVG 元素并创建 d3 选择集
      const svgElement = d3.select(svg.value);
      const numRef = ref([]);

      // 创建环形轮廓
      const width = svgElement.attr('width');
      const height = svgElement.attr('height');
      const innerRadius = 140;
      const outerRadius = 268;
      const numSpokes = 9;
      const spokeWidth = 21.4;

      const crossBelt = svgElement.append('g')
          .attr('class', 'cross-belt')
          .attr('transform', `translate(${width / 2}, ${height / 2})`);

      const arc = d3.arc()
          .innerRadius(innerRadius)
          .outerRadius(outerRadius)
          .startAngle(1.5)
          .endAngle(Math.PI * 0.965);

      crossBelt.append('path')
          .attr('d', arc)
          .attr('fill', 'none')
          .attr('stroke', '#add8e6')
          .attr('stroke-width', 2);
      const spokes = d3.range(numSpokes);
      const spokeAngle = (Math.PI / 2.2) / (numSpokes - 0.7);
      const spokeLength = outerRadius - innerRadius;
      const spokeStartAngle = spokeAngle / 2;
      const spokeEndAngle = Math.PI - spokeAngle / 2;

      crossBelt.attr('transform', `translate(${width / 2}, ${height / 2}) rotate(4.8)`);

      //辐条
      // 将 g 元素的 ref 属性设置为 numRef
      // crossBelt.selectAll('.num')
      //     .data(spokes)
      //     .enter()
      //     .append('g')
      //     .attr('class', 'num')
      //     .attr('ref', (d, i, nodes) => {
      //       numRef.value[i] = nodes[i];
      //     })
      //     .attr('transform', function (d) {
      //       const angle = spokeAngle * d;
      //       return `rotate(${angle * 180 / Math.PI})`;
      //     })
      //     .each(function () {
      //       const spokeGroup = d3.select(this);
      //       spokeGroup.append('path')
      //           .attr('d', function () {
      //             return `M ${innerRadius},${-spokeWidth / 2}
      //           L ${innerRadius},${spokeWidth / 2}
      //           L ${innerRadius + spokeLength * 0.33},${spokeWidth / 2}
      //           L ${innerRadius + spokeLength * 0.33},${-spokeWidth / 2}
      //           L ${innerRadius},${-spokeWidth / 2}`;
      //           })
      //           .attr('fill', '#265665');
      //       spokeGroup.append('text')
      //           .attr('class', 'num-text')
      //           .attr('x', innerRadius + spokeLength / 2)
      //           .attr('y', 0)
      //           .text(function (d) {
      //             return d + 1;
      //           });
      //
      //       spokeGroup.append('path')
      //           .attr('d', function () {
      //             return `M ${innerRadius + spokeLength * 0.33},${-spokeWidth / 2}
      //           L ${innerRadius + spokeLength * 0.33},${spokeWidth / 2}
      //           L ${innerRadius + spokeLength * 0.67},${spokeWidth / 2}
      //           L ${innerRadius + spokeLength * 0.67},${-spokeWidth / 2}
      //           L ${innerRadius + spokeLength * 0.33},${-spokeWidth / 2}`;
      //           })
      //           .attr('fill', '#22c8de');
      //       spokeGroup.append('path')
      //           .attr('d', function () {
      //             return `M ${innerRadius + spokeLength * 0.67},${-spokeWidth / 2}
      //           L ${innerRadius + spokeLength * 0.67},${spokeWidth / 2}
      //           L ${outerRadius},${spokeWidth / 2}
      //           L ${outerRadius},${-spokeWidth / 2}
      //           L ${innerRadius + spokeLength * 0.67},${-spokeWidth / 2}`;
      //           })
      //           .attr('fill', '#265665');
      //     });


    });

    return {
      svg,
      numRef
    };
  },

  mounted() {
    onMounted(() => {
      // 执行一些初始化操作

    });
  },
  methods: {

  },
});
</script>

<style scoped lang="scss">
.conveyor-belt {
  width: 250px;
  height: 200px;
}

svg {
  width: 300px;
  height: 300px;
}

.rotate {
  transform: rotate(90deg) translate(20px, -46px);
}

.num {
  width: 17px;
  height: 30px;
  display: inline-block;
  transform: rotate(90deg);
}

.xz {
  border: 2px solid black;
  border-radius: 15px;

  .in-goods {
    background-color: green;
  }

  .err-status {
    background-color: red;
  }
}

.xz-t,
.xz-b {
  height: 40px;
  border: 1px solid lightblue;
  background-color: #265665;
}

.item2 {
  height: 50px;
  border-top: 2px solid lightblue;
  border-bottom: 2px solid lightblue;
  background-color: #22c8de;
}

/* Dynamic classes */
.mouth-0 {
  position: absolute;
  width: 21px;
  height: 150px;
  transform: translate(5px, -166px) rotate(-5deg);
}

.mouth-1 {
  position: absolute;
  width: 21px;
  height: 150px;
  transform: translate(38px, -172px) rotate(-11.25deg);
}

.mouth-2 {
  position: absolute;
  width: 21px;
  height: 150px;
  transform: translate(76px, -185px) rotate(-22.5deg);
}

.mouth-3 {
  position: absolute;
  width: 21px;
  height: 150px;
  transform: translate(111px, -204px) rotate(-33.75deg);
}

.mouth-4 {
  position: absolute;
  width: 21px;
  height: 150px;
  transform: translate(140px, -230px) rotate(-45deg);
}

.mouth-5 {
  position: absolute;
  width: 21px;
  height: 150px;
  transform: translate(166px, -260px) rotate(-56.25deg);
}

.mouth-6 {
  position: absolute;
  width: 21px;
  height: 150px;
  transform: translate(185px, -295px) rotate(-67.5deg);
}

.mouth-7 {
  position: absolute;
  width: 21px;
  height: 150px;
  transform: translate(197px, -331px) rotate(-77deg);
}

.mouth-8 {
  position: absolute;
  width: 21px;
  height: 150px;
  transform: translate(201px, -370px) rotate(-88deg);
}

//.xz {
//  border: 2px solid black;
//  border-radius: 15px;
//}
//
//.xz-1 {
//  position: absolute;
//  width: 21px;
//  height: 150px;
//  transform: translate(5px, -166px) rotate(-5deg);
//
//  .xz-1-t,
//  .xz-1-b {
//    height: 40px;
//    border: 1px solid lightblue;
//    background-color: #265665;
//  }
//
//  .item2 {
//    height: 50px;
//    border-top: 2px solid lightblue;
//    border-bottom: 2px solid lightblue;
//    background-color: #22c8de;
//  }
//
//}
//
//.xz-2 {
//  position: absolute;
//  width: 21px;
//  height: 150px;
//  transform: translate(38px, -172px) rotate(-11.25deg);
//
//  .xz-2-t,
//  .xz-2-b {
//    height: 40px;
//    border: 1px solid lightblue;
//    background-color: #265665;
//  }
//
//  .item2 {
//    height: 50px;
//    border-top: 2px solid lightblue;
//    border-bottom: 2px solid lightblue;
//    background-color: #22c8de;
//  }
//
//}
//
//.xz-3 {
//  position: absolute;
//  width: 21px;
//  height: 150px;
//  transform: translate(76px, -185px) rotate(-22.5deg);
//
//  .xz-3-t,
//  .xz-3-b {
//    height: 40px;
//    border: 1px solid lightblue;
//    background-color: #265665;
//  }
//
//  .item2 {
//    height: 50px;
//    border-top: 2px solid lightblue;
//    border-bottom: 2px solid lightblue;
//    background-color: #22c8de;
//  }
//}
//
//.xz-4 {
//  position: absolute;
//  width: 21px;
//  height: 150px;
//  transform: translate(111px, -204px) rotate(-33.75deg);
//
//  .xz-4-t,
//  .xz-4-b {
//    height: 40px;
//    border: 1px solid lightblue;
//    background-color: #265665;
//  }
//
//  .item2 {
//    height: 50px;
//    border-top: 2px solid lightblue;
//    border-bottom: 2px solid lightblue;
//    background-color: #22c8de;
//  }
//}
//
//.xz-5 {
//  position: absolute;
//  width: 21px;
//  height: 150px;
//  transform: translate(140px, -230px) rotate(-45deg);
//
//  .xz-5-t,
//  .xz-5-b {
//    height: 40px;
//    border: 1px solid lightblue;
//    background-color: #265665;
//  }
//
//  .item2 {
//    height: 50px;
//    border-top: 2px solid lightblue;
//    border-bottom: 2px solid lightblue;
//    background-color: #22c8de;
//  }
//}
//
//.xz-6 {
//  position: absolute;
//  width: 21px;
//  height: 150px;
//  transform: translate(166px, -260px) rotate(-56.25deg);
//
//  .xz-6-t,
//  .xz-6-b {
//    height: 40px;
//    border: 1px solid lightblue;
//    background-color: #265665;
//  }
//
//  .item2 {
//    height: 50px;
//    border-top: 2px solid lightblue;
//    border-bottom: 2px solid lightblue;
//    background-color: #22c8de;
//  }
//}
//
//.xz-7 {
//  position: absolute;
//  width: 21px;
//  height: 150px;
//  transform: translate(185px, -295px) rotate(-67.5deg);
//
//  .xz-7-t,
//  .xz-7-b {
//    height: 40px;
//    border: 1px solid lightblue;
//    background-color: #265665;
//  }
//
//  .item2 {
//    height: 50px;
//    border-top: 2px solid lightblue;
//    border-bottom: 2px solid lightblue;
//    background-color: #22c8de;
//  }
//}
//
//.xz-8 {
//  position: absolute;
//  width: 21px;
//  height: 150px;
//  transform: translate(197px, -331px) rotate(-77deg);
//
//  .xz-8-t,
//  .xz-8-b {
//    height: 40px;
//    border: 1px solid lightblue;
//    background-color: #265665;
//  }
//
//  .item2 {
//    height: 50px;
//    border-top: 2px solid lightblue;
//    border-bottom: 2px solid lightblue;
//    background-color: #22c8de;
//  }
//}
//
//.xz-9 {
//  position: absolute;
//  width: 21px;
//  height: 150px;
//  transform: translate(203px, -370px) rotate(-88deg);
//
//  .xz-9-t,
//  .xz-9-b {
//    height: 40px;
//    border: 1px solid lightblue;
//    background-color: #265665;
//  }
//
//  .item2 {
//    height: 50px;
//    border-top: 2px solid lightblue;
//    border-bottom: 2px solid lightblue;
//    background-color: #22c8de;
//  }
//}
</style>